.following .search {
	margin-bottom: 0;
}

.following__search.card.is-compact {
	padding: 0;
	box-shadow: 0 0 0 2px var( --color-neutral-10 ), 0 1px 2px var( --color-neutral-10 );
	z-index: z-index( 'root', '.reader-following-search' );
}

// Following intro
.following__intro {
	border: 1px solid var( --color-neutral-0 );

	.following__intro-copy {
		color: #045182;

		a {
			color: #1785be;
			border-bottom: 1px #1785be solid;

			&:hover {
				color: var( --color-primary );
				border-bottom: 1px solid var( --color-primary );
			}
		}
	}
}

.following__intro {
	background-position: 100% 20px;
	background-repeat: no-repeat;
	background-size: 450px;
	min-height: 140px;

	@media ( min-width: 661px ) and ( max-width: 773px ) {
		background-position: 150px 20px;
	}

	@include breakpoint-deprecated( '<660px' ) {
		background-position: 120px 20px;
	}

	.following__intro-copy-hidden {
		@include breakpoint-deprecated( '<660px' ) {
			display: none;
		}
	}

	.following__intro-character {
		height: 140px;
		margin-right: -2px; // prevent right cropping of illustration

		// Hides the character when main content column gets too narrow
		@media ( min-width: 661px ) and ( max-width: 773px ) {
			display: none;
		}
	}
}

.following__intro .following__intro-header {
	align-items: stretch;
	display: flex;
	flex-direction: row;
}

.following__intro .following__intro-copy {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font-size: 18px;
	justify-content: center;
	margin-left: 24px;

	@media ( min-width: 661px ) and ( max-width: 773px ) {
		margin-bottom: 20px;
		margin-top: 20px;
	}

	@include breakpoint-deprecated( '<960px' ) {
		font-size: $font-body;
	}

	@include breakpoint-deprecated( '<660px' ) {
		font-size: 18px;
	}

	@include breakpoint-deprecated( '<480px' ) {
		font-size: $font-body;
	}
}

.following__search {
	margin-top: 8px;

	@include breakpoint-deprecated( '>660px' ) {
		margin-top: 30px;
	}
}

// Dismiss button
.following__intro .following__intro-close {
	align-items: flex-start;
	margin-top: -4px;
	margin-right: 20px;
	height: 24px;
	width: 24px;

	.following__intro-close-icon {
		position: absolute;
		z-index: z-index( 'root', '.following__intro-close-icon' );
		fill: var( --color-text-inverted );

		// Fix for 1px (0.5pt) misalignment in Safari under retina. See
		// https://github.com/Automattic/wp-calypso/pull/11282/#issuecomment-289837131
		transform: scale( 1 );

		&:hover {
			cursor: pointer;
			fill: darken( #62a9a7, 15% );
		}

		&:hover + .following__intro-close-icon-bg {
			background-color: lighten( #62a9a7, 50% );
			box-shadow: 0 0 0 2px lighten( #62a9a7, 40% );
		}
	}

	.following__intro-close-icon-bg {
		background-color: #5ca8a6;
		border-radius: 10px;
		display: block;
		height: 20px;
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: z-index( 'root', '.following__intro-close-icon-bg' );
		width: 20px;
	}
}

.following__intro .following__intro-close {
	.following__intro-close-icon {
		fill: var( --color-neutral-20 );
	}

	.following__intro-close-icon-bg {
		background-color: var( --color-surface );
	}
}

div.following__reader-vote {
	border-left-color: #d94f4f !important;
}
